Solid Router: Zvládnutie navigácie na strane klienta v SolidJS

SolidJS, známy svojím výnimočným výkonom a jednoduchosťou, poskytuje fantastický základ pre tvorbu moderných webových aplikácií. Pre vytváranie skutočne pútavých a používateľsky prívetivých zážitkov je nevyhnutný robustný router na strane klienta. Vstúpte do sveta Solid Router, oficiálneho a odporúčaného routera pre SolidJS, navrhnutého tak, aby sa bezproblémovo integroval s reaktívnymi princípmi tohto frameworku.

Tento komplexný sprievodca sa ponorí do sveta Solid Routera, pokrývajúc všetko od základného nastavenia až po pokročilé techniky pre tvorbu komplexných a dynamických jednostránkových aplikácií (SPA). Či už ste skúsený vývojár v SolidJS alebo len začínate, tento článok vás vybaví vedomosťami a zručnosťami na zvládnutie navigácie na strane klienta.

Čo je Solid Router?

Solid Router je ľahký a výkonný router na strane klienta špeciálne navrhnutý pre SolidJS. Využíva reaktivitu SolidJS na efektívnu aktualizáciu používateľského rozhrania na základe zmien URL adresy v prehliadači. Na rozdiel od tradičných routerov, ktoré sa spoliehajú na porovnávanie virtuálneho DOM, Solid Router priamo manipuluje s DOM, čo vedie k rýchlejšiemu a predvídateľnejšiemu výkonu.

Kľúčové vlastnosti Solid Routera zahŕňajú:

• Deklaratívne smerovanie: Definujte svoje cesty pomocou jednoduchého a intuitívneho API založeného na JSX.
• Dynamické smerovanie: Jednoducho spracujte cesty s parametrami, čo vám umožní vytvárať dynamické a dátami riadené aplikácie.
• Vnorené cesty: Organizujte svoju aplikáciu do logických sekcií pomocou vnorených ciest.
• Komponent pre odkazy: Plynule navigujte medzi cestami pomocou komponentu <A>, ktorý automaticky spravuje aktualizácie URL a štýlovanie aktívnych odkazov.
• Načítanie dát: Načítajte dáta asynchrónne pred vykreslením cesty, čím zabezpečíte plynulý používateľský zážitok.
• Prechody: Vytvárajte vizuálne pútavé prechody medzi cestami na zlepšenie používateľského zážitku.
• Spracovanie chýb: Elegantne spracujte chyby a zobrazte vlastné chybové stránky.
• Integrácia s History API: Bezproblémovo sa integruje s History API prehliadača, čo používateľom umožňuje navigovať pomocou tlačidiel späť a vpred.

Začíname so Solid Routerom

Inštalácia

Na inštaláciu Solid Routera použite váš preferovaný správca balíčkov:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

Základné nastavenie

Jadro Solid Routera sa točí okolo komponentov <Router> a <Route>. Komponent <Router> slúži ako koreň smerovacieho systému vašej aplikácie, zatiaľ čo komponenty <Route> definujú mapovanie medzi URL adresami a komponentmi.

Tu je základný príklad:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

V tomto príklade komponent <Router> obaľuje celú aplikáciu. Komponenty <Route> definujú dve cesty: jednu pre koreňovú cestu ("/") a druhú pre cestu "/about". Keď používateľ prejde na jednu z týchto ciest, vykreslí sa príslušný komponent (Home alebo About).

Komponent <A>

Na navigáciu medzi cestami použite komponent <A>, ktorý poskytuje Solid Router. Tento komponent je podobný bežnému HTML tagu <a>, ale automaticky spravuje aktualizácie URL a zabraňuje úplnému znovunačítaniu stránky.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

Keď používateľ klikne na jeden z týchto odkazov, Solid Router aktualizuje URL adresu prehliadača a vykreslí príslušný komponent bez spustenia úplného znovunačítania stránky.

Pokročilé techniky smerovania

Dynamické smerovanie s parametrami cesty

Solid Router podporuje dynamické smerovanie, čo vám umožňuje vytvárať cesty s parametrami. Je to užitočné na zobrazovanie obsahu na základe špecifického ID alebo slugu.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

V tomto príklade je segment :id v ceste parametrom cesty. Na prístup k hodnote parametra id v rámci komponentu UserProfile môžete použiť hook useParams:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Hook useParams vracia objekt obsahujúci parametre cesty. V tomto prípade bude params.id obsahovať hodnotu parametra id z URL. Následne sa použije hook createResource na načítanie údajov o používateľovi na základe ID.

Medzinárodný príklad: Predstavte si globálnu e-commerce platformu. Mohli by ste použiť dynamické smerovanie na zobrazenie detailov produktu na základe ID produktu: /products/:productId. To vám umožní jednoducho vytvárať jedinečné URL adresy pre každý produkt, čo uľahčuje používateľom zdieľanie a ukladanie konkrétnych položiek do záložiek bez ohľadu na ich polohu.

Vnorené cesty

Vnorené cesty vám umožňujú organizovať aplikáciu do logických sekcií. Je to obzvlášť užitočné pre komplexné aplikácie s viacerými úrovňami navigácie.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

V tomto príklade komponent <Dashboard> slúži ako kontajner pre komponenty <Profile> a <Settings>. Cesty <Profile> a <Settings> sú vnorené v rámci cesty <Dashboard>, čo znamená, že sa vykreslia iba vtedy, keď sa používateľ nachádza na ceste "/dashboard".

Na vykreslenie vnorených ciest v rámci komponentu <Dashboard> musíte použiť komponent <Outlet>:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

Komponent <Outlet> slúži ako zástupný symbol, kde sa budú vykresľovať vnorené cesty. Keď používateľ prejde na "/dashboard/profile", komponent <Profile> sa vykreslí v rámci komponentu <Outlet>. Podobne, keď používateľ prejde na "/dashboard/settings", komponent <Settings> sa vykreslí v rámci komponentu <Outlet>.

Načítanie dát s createResource

Asynchrónne načítanie dát pred vykreslením cesty je kľúčové pre poskytnutie plynulého používateľského zážitku. Solid Router sa bezproblémovo integruje s hookom createResource od SolidJS, vďaka čomu je načítanie dát hračkou.

Príklad sme už videli skôr v komponente UserProfile, ale pre jasnosť ho uvádzame znova:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Hook createResource prijíma dva argumenty: signál, ktorý spúšťa načítanie dát, a funkciu, ktorá dáta načíta. V tomto prípade je signálom () => params.id, čo znamená, že dáta sa načítajú vždy, keď sa zmení parameter id. Funkcia fetchUser načíta údaje o používateľovi z API na základe ID.

Hook createResource vracia pole obsahujúce zdroj (načítané dáta) a funkciu na opätovné načítanie dát. Zdroj je signál, ktorý uchováva dáta. K dátam môžete pristupovať zavolaním signálu (user()). Ak sa dáta ešte načítavajú, signál vráti undefined. To vám umožňuje zobraziť indikátor načítavania, kým sa dáta načítavajú.

Prechody

Pridanie prechodov medzi cestami môže výrazne zlepšiť používateľský zážitok. Hoci Solid Router nemá vstavanú podporu prechodov, dobre sa integruje s knižnicami ako solid-transition-group na dosiahnutie plynulých a vizuálne pútavých prechodov.

Najprv nainštalujte balíček solid-transition-group:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

Potom obaľte svoje cesty komponentom <TransitionGroup>:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

V tomto príklade je každá cesta obalená komponentom <Transition>. Atribút name špecifikuje predponu CSS triedy pre prechod a atribút duration špecifikuje trvanie prechodu v milisekundách.

Budete musieť definovať príslušné CSS triedy pre prechod vo vašom štýle:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

Tento CSS kód definuje jednoduchý prechod s prelínaním (fade-in/fade-out). Pri vstupe na cestu sa aplikujú triedy .fade-enter a .fade-enter-active, čo spôsobí, že sa komponent objaví. Pri opustení cesty sa aplikujú triedy .fade-exit a .fade-exit-active, čo spôsobí, že komponent zmizne.

Spracovanie chýb

Elegantné spracovanie chýb je nevyhnutné pre poskytnutie dobrého používateľského zážitku. Solid Router nemá vstavané spracovanie chýb, ale môžete ho ľahko implementovať pomocou globálnej chybovej hranice (error boundary) alebo špecifického handleru pre danú cestu.

Tu je príklad globálnej chybovej hranice:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Komponent <ErrorBoundary> zachytáva akékoľvek chyby, ktoré sa vyskytnú v jeho potomkoch. Atribút fallback špecifikuje komponent, ktorý sa má vykresliť, keď nastane chyba. V tomto prípade vykreslí odsek s chybovou správou.

Komponent <Suspense> spracováva čakajúce promises, typicky používané s asynchrónnymi komponentmi alebo načítavaním dát. Zobrazuje obsah atribútu `fallback`, kým sa promises nevyriešia.

Na vyvolanie chyby môžete v rámci komponentu vyhodiť výnimku:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Keď sa tento kód vykoná, komponent <ErrorBoundary> zachytí chybu a vykreslí záložný komponent.

Medzinárodné aspekty: Pri zobrazovaní chybových správ zvážte internacionalizáciu (i18n). Použite knižnicu na preklady, aby ste poskytli chybové správy v preferovanom jazyku používateľa. Napríklad, ak používateľ v Japonsku narazí na chybu, mal by vidieť chybovú správu v japončine, nie v angličtine.

Osvedčené postupy pre používanie Solid Routera

• Udržujte svoje cesty organizované: Používajte vnorené cesty na organizáciu aplikácie do logických sekcií. Uľahčí to údržbu a orientáciu vo vašom kóde.
• Používajte parametre cesty pre dynamický obsah: Využívajte parametre cesty na vytváranie dynamických URL pre zobrazovanie obsahu na základe špecifického ID alebo slugu.
• Načítavajte dáta asynchrónne: Načítavajte dáta asynchrónne pred vykreslením cesty, aby ste zabezpečili plynulý používateľský zážitok.
• Pridajte prechody medzi cestami: Používajte prechody na zlepšenie používateľského zážitku a dodajte svojej aplikácii uhladenejší vzhľad.
• Spracovávajte chyby elegantne: Implementujte spracovanie chýb na zachytenie a zobrazenie chýb používateľsky prívetivým spôsobom.
• Používajte popisné názvy ciest: Vyberajte názvy ciest, ktoré presne odrážajú obsah cesty. Uľahčí to pochopenie štruktúry vašej aplikácie.
• Testujte svoje cesty: Píšte jednotkové testy, aby ste sa uistili, že vaše cesty fungujú správne. Pomôže vám to zachytiť chyby včas a predchádzať regresiám.

Záver

Solid Router je výkonný a flexibilný router na strane klienta, ktorý sa bezproblémovo integruje so SolidJS. Zvládnutím jeho funkcií a dodržiavaním osvedčených postupov môžete vytvárať komplexné a dynamické jednostránkové aplikácie, ktoré poskytujú plynulý a pútavý používateľský zážitok. Od základného nastavenia po pokročilé techniky, ako je dynamické smerovanie, načítanie dát a prechody, vám tento sprievodca poskytol vedomosti a zručnosti na sebavedomú navigáciu vo svete navigácie na strane klienta v SolidJS. Prijmite silu Solid Routera a odomknite plný potenciál vašich aplikácií v SolidJS!

Nezabudnite nahliadnuť do oficiálnej dokumentácie Solid Routera pre najaktuálnejšie informácie a príklady: [Odkaz na dokumentáciu Solid Routera - Placeholder]

Pokračujte v tvorbe úžasných vecí so SolidJS!